<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true"  class="demo-form-inline" >
                <el-form-item label="部门名称">
                    <el-input v-model="shopTypeName"  placeholder="部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="$store.dispatch('getShopTypeList',{shopTypeName})"
                    >查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="shopTypeId='';isShopType=true" >添加部门</el-button>
                </el-form-item>

            </el-form>
        </div>

        <el-table
                v-loading="$store.state.isLoading"
                :border="true"
                :data="$store.state.shop.shopTypeList"
                style="width: 100%">
            <el-table-column label="ID" width="250">
                <template slot-scope="scope">
                    {{scope.row._id}}
                </template>
            </el-table-column>
            <el-table-column
                    label="上传日期"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime | date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="部门名称">
                <template slot-scope="scope">
                    {{scope.row.shopTypeName}}
                </template>
            </el-table-column>

            <el-table-column label="部门图片">
                <template slot-scope="scope">
                    <img :src="'/ele/'+scope.row.shopTypePic" alt="" width="100">
                </template>
            </el-table-column>



            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="$router.push({name:'shopList',params:{shopTypeId:scope.row._id}})">查看该类别下的组</el-button>
                    <el-button size="mini" type="success" @click="shopTypeId=scope.row._id;shopListVisible=true;">添加组 </el-button>
                    <el-button size="mini" type="danger" @click="shopTypeId=scope.row._id;isShopType=true">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteOne(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <PageInfo :query="{shopTypeName}" actions-name="getShopTypeList"></PageInfo>
        <ShopTypeDialog :shop-type-id="shopTypeId"  v-if="isShopType" :visible.sync="isShopType"></ShopTypeDialog>
        <ShopListDialog :shop-type-id="shopTypeId" v-if="shopListVisible" :shop-list-visible.sync="shopListVisible"></ShopListDialog>
    </div>
</template>

<script>
    export default {
        name: "ShopTypeList",
        data(){
            return{
                isShopType:false,
                shopListVisible:false,
                shopTypeId:"",
                shopTypeName:""
            }
        },
        methods:{
            addShopType(){
                this.isShopType = true;
                setTimeout(()=>{
                    this.$refs.shopTypeDialog.dialogFormVisible = true;
                },100)
                this.$store.dispatch("getShopTypeList")
            },
            async deleteOne(id){
                const path = this.$route.path
                const data = await this.$store.dispatch("deleteOneById",{id,path})
                if(data.ok ===1)
                    this.$store.dispatch("getShopTypeList")
            }
        }
    }
</script>

<style scoped>

</style>